<template>
	<view> <!--商品排列模板 所有内容在一行，可滑动 -->
		<view class="module_bgContent">
			<scroll-view class="integral-scroll" scroll-x scroll-with-animation @scrolltolower="asideScroll">
				<view class="scroll-slide">
					<image class="scroll-image"></image>
					<view class="productProp">
						<text class="product-name">机器人机器人机器人机器人</text>
						<text class="integral">积分：</text> 
						<text class="price">50.00</text>
						<shopping-cart class="shoppingCart"  :Item="item" :cartId="cartId" :cartBool="false"></shopping-cart>
					</view>
				</view>
				<view class="scroll-slide">
					<image class="scroll-image"></image>
					<view class="productProp">
						<text class="product-name">机器人</text>
						<text class="integral">积分：</text>
						<text class="price">50.00</text>
						<shopping-cart class="shoppingCart"  :Item="item" :cartId="cartId" :cartBool="false"></shopping-cart>
					</view>
				</view>
				<view class="scroll-slide">
					<image class="scroll-image"></image>
					<view class="productProp">
						<text class="product-name">机器人机器人机器人机器人机器人机器人</text>
						<text class="integral">积分：</text>
						<text class="price">50.00</text>
						<shopping-cart class="shoppingCart"  :Item="item" :cartId="cartId" :cartBool="false"></shopping-cart>
					</view>
				</view>
				<view class="scroll-slide">
					<image class="scroll-image"></image>
					<view class="productProp">
						<text class="product-name">机器人</text>
						<text class="integral">积分：8540</text>
						<text class="price">50.00</text>
						<shopping-cart class="shoppingCart"  :Item="item" :cartId="cartId" :cartBool="false"></shopping-cart>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import shoppingCart from '@/components/shoppingCart-Button.vue';
	export default {
		components:{
			shoppingCart,
		},
		name: 'product4',
		props:{
			//商品列表
			product: {
				type: Array,
				default: ()=>[]
			},
			//调用按钮模板id
			cartId: {
				type: Number,
				default: 1,
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			asideScroll(){
				// console.log('12121212')
			}
		},
	}
</script>

<style lang="scss">
	.shoppingCart{
		width: auto;
		height: auto;
		position: absolute;
		bottom: 0upx;
		right: 0upx;
	}
	.module_bgContent{
		padding-top: 14upx;
		padding-bottom: 22upx;
		white-space: nowrap;
		position: relative;
		z-index: 1;
		.integral-scroll{
			padding-left: 20upx;
			// flex: 1;
			white-space: nowrap;
			// .scroll-slide>image{
			// 	border: 2upx solid #000;
			// }
			.scroll-slide{
				width: 256upx;
				height: 100%;
				margin-right: 22upx;
				border: 2upx solid #eee;
				box-shadow: 0 0 28upx 0 rgba(0,0,0,.08);
				overflow: hidden; 
				display: inline-block;
				background-color: #fff;
				border-radius: 12upx;
				vertical-align: top;
				.scroll-image{
					width: 100%;
					height: 128px;
					text-align: center;
					border-radius: 10upx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: cover;
					border: 2upx solid #000;
				}
				.productProp{
					margin: 16upx 18upx 20upx 18upx;
					font-size: 17px;
					overflow: hidden;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					font-size: 14px;
					position: relative;
					.price{
						width: 100%;
						color: #999;
						text-decoration: line-through;
						font-size: 12px;
						line-height: 30upx;
						display: inline-block;
					}
					.product-name{
						width: 100%;
						display: inline-block;
						color: #353535;
						white-space: nowrap;
						text-overflow: ellipsis;
						word-break: break-all;
						overflow: hidden;
						line-height: 26upx;
					}
					.integral{
						width: 100%;
						display: inline-block;
						line-height: 30upx;
						margin: 20upx 0;
					}
				}
			}
		}
	}
</style>
